<template>
    <div class="child-section">
        <buni-header>
            <div class="main">
				<van-overlay :show="isLoading">
				  <div class="empty">
				  	<van-loading type="spinner" color="#1989fa" />
				  </div>
				</van-overlay>
				<div class="module">
					<van-steps :active="active" active-icon="success" active-color="#ff340c">
					  <van-step>融资需求</van-step>
					  <van-step>企业信息</van-step>
					  <van-step>联系人</van-step>
					  <van-step>上传证件</van-step>
					  <van-step>授权书</van-step>
					</van-steps>
				</div>
				<div>
					<van-form @submit="onSubmit" ref="ruleForm" :scroll-to-error='true' :show-error-message='false' label-width='100px'>
						<!-- 企业基本信息 -->
						<div class="module">
							<h3>企业基本信息</h3>
							<!-- <van-field
							  v-model="comData.qymc"
							  name="qymc"
							  label="企业名称"
							  required
							  clearable
							  placeholder="请填写企业名称"
							  :rules="[{ required: true, message: '请填写企业名称' }]"
							/> -->
							<van-field
							  readonly
							  clickable
							  required
							  name="qymc"
							  :value="comData.qymc"
							  label="企业名称"
							  placeholder="请选择企业名称"
							  :rules="[{ required: true, message: '请选择企业名称' }]"
							  @click="showPicker = true"
							/>
							<van-popup v-model="showPicker" position="bottom" @close='onCancel'>
							  <van-search v-model="searchValue" placeholder="请输入企业名称关键词" @input="searchInput" />
							  <van-picker
							    show-toolbar
								:columns="columns"
								@confirm="onConfirm"
								@cancel="onCancel"
							  />
							</van-popup>
							<van-field
							  v-model="comData.shtyxydm"
							  name="shtyxydm"
							  label="信用代码"
							  required
							  clearable
							  placeholder="请填写统一社会信用代码"
							  :rules="[{ required: true, message: '请填写统一社会信用代码' }]"
							/>
							<van-field
							  v-model="comData.fddbr"
							  name="fddbr"
							  label="法人姓名"
							  clearable
							  placeholder="请填写法人姓名"
							/>
							<van-field
							  v-model="comData.sfzjhm"
							  name="sfzjhm"
							  label="身份证号码"
							  required
							  clearable
							  placeholder="请填写身份证号码"
							  :rules="[{ required: true, message: '请填写正确的身份证号码' },{ pattern:pattern1, message: '请填写正确的身份证号码' }]"
							/>
							<van-field
							  v-model="comData.lxdh"
							  name="lxdh"
							  label="手机号码"
							  required
							  clearable
							  placeholder="请填写手机号码"
							  :rules="[{ required: true, message: '请填写正确的手机号码' },{ pattern:pattern2, message: '请填写正确的手机号码' }]"
							/>
							<van-field
							  v-model="comData.khh"
							  name="khh"
							  label="开户行"
							  required
							  clearable
							  placeholder="请填写开户行"
							  :rules="[{ required: true, message: '请填写正确的开户行' }]"
							/>
							
							<van-field
							  readonly
							  clickable
							  required
							  name="szdq"
							  :value="comData.szdq"
							  label="所在地区"
							  placeholder="点击选择所在地区"
							  :rules="[{ required: true, message: '请选择所在地区' }]"
							  @click="showPicker4 = true"
							/>
							<van-popup v-model="showPicker4" position="bottom">
							  <van-area
							      :area-list="areaList"
							      @confirm="onConfirm4"
							      @cancel="showPicker4 = false"
							    />
							</van-popup>
							
							<van-field
							  readonly
							  clickable
							  :value="comData.qylx"
							  label="企业类型"
							  placeholder="点击选择企业类型"
							  @click="showPicker5 = true"
							/>
							<van-popup v-model="showPicker5" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns5"
								@confirm="onConfirm5"
								@cancel="showPicker5 = false"
							  />
							</van-popup>
							
							<van-field
							  readonly
							  clickable
							  :value="comData.yqxg"
							  label="疫情相关企业"
							  placeholder="点击选择是否疫情相关企业"
							  @click="showPicker6 = true"
							/>
							<van-popup v-model="showPicker6" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns6"
								@confirm="onConfirm6"
								@cancel="showPicker6 = false"
							  />
							</van-popup>
							
							<div class="button">
								<van-button round block plain type="default" native-type="button" @click="handleBack">上一步</van-button>
								<van-button round block type="info" native-type="button" @click="handleNext">下一步</van-button>
							</div>
						</div>
					</van-form>
				</div>
			</div>
        </buni-header>
    </div>
</template>

<script>
import buniHeader from "../../components/buniHeader.vue";
import {dictGrid,getCompanyNamesByLikeName,getCompanyInfoByName} from '../../request/api.js'
import { areaList } from '@vant/area-data';
import { Toast } from 'vant';
import _ from 'lodash'
export default {
    name:'comInfo',
    components: {
        buniHeader
    },
    data() {
        return {
			active:1,
			comData:{
				qymc:undefined,
				shtyxydm:undefined,
				fddbr:undefined,
				sfzjhm:undefined,
				lxdh:undefined,
				khh:undefined,
				szdq:undefined,
				qylx:undefined,
				yqxg:undefined
			},
			showPicker:false,
			columns:[],
			searchValue:undefined,
			isFind:true,
			personData:{},
			pattern1: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
			pattern2: /^1[3|4|5|7|8]\d{9}$/,
			areaList,
			timer:null,
			isLoading:false,
			showPicker4:false,
			showPicker5:false,
			columns5:['小微企业'],
			showPicker6:false,
			columns6:['是','否'],
        }
    },
	created() {
		
	},
    methods: {
		handleBack(){
			this.$router.back()
		},
		handleNext(){
			this.$refs.ruleForm.validate().then(()=>{
				this.isLoading = true;
				this.timer = setTimeout(()=>{
					this.isLoading = false;
					this.$router.push({path:"/contacts"})
				},500)
			});
		},
		searchInput(val){
			let inputVal = val.replace(/\s*/g,"");
			this.searchValue = inputVal;
			if(!inputVal){
				this.columns = [];
			}else{
				this.getRemote(inputVal);
			}
		},
		//防抖
		getRemote: _.debounce(function (inputVal) {
			this.search(inputVal);
		}, 2000),
		//根据输入内容模糊查询企业名称
		search(qymc){
			this.isFind = false;
			getCompanyNamesByLikeName({name: qymc}).then(res=>{
				if(res.status){
					this.columns = res.data.map(item=>item.ENTNAME)
					this.isFind = true;
				}
			})
		},
		onConfirm(val){
			this.comData.qymc = val;
			this.searchValue = undefined;
			this.columns = [];
			this.showPicker = false;
			//根据企业名称查询社会统一信用代码
			getCompanyInfoByName({name:val}).then(res=>{
				if(res.status){
					this.comData.shtyxydm = res.data.creditcode;
				}else{
					Toast(res.msg)
				}
			})
		},
		onCancel(){
			this.searchValue = undefined;
			this.columns = [];
			this.showPicker = false;
		},
		onConfirm4(val) {
		  this.comData.szdq = val.filter((item) => !!item).map((item) => item.name).join('/');
		  this.showPicker4 = false;
		},
		onConfirm5(val) {
		  this.comData.qylx = val;
		  this.showPicker5 = false;
		},
		onConfirm6(val) {
		  this.comData.yqxg = val;
		  this.showPicker6 = false;
		},
		onSubmit(){
			
		},
    },
	beforeDestroy() {
		clearTimeout(this.timer);
	}
}
</script>
<style scoped lang="scss">
.main{
	width: 10rem;
	background: #083bb9;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.empty{
		width: 10rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.module{
		width: calc(10rem - 40px);
		padding: 0.133333rem 0.133333rem;
		border-radius: 0.066666rem;
		margin-bottom: 0.133333rem;
		background-color: #fff;
		h3{
			margin: 0.133333rem 0 0.133333rem 0.133333rem;
			font-size: 32px;
		}
		.selection{
			padding: 0 0.346666rem;
			span{
				color: #f00;
			}
		}
		.button{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
}
</style>
<style type="text/css">
.van-radio{
	margin-bottom: 0.133333rem;
}
.van-button{
	margin-top: 0.266666rem !important;
}
</style>